<template>
        <el-container>
            <el-header>录入公司信息</el-header>
            <el-main>
                <el-form ref="form" label-position="top" label-width="80px" label-suffix="：" :model="form" :rules="rule">
                    <el-form-item label="厦门996或单休的公司全名" prop="name">
                        <el-input v-model="form.name"></el-input>
                    </el-form-item>
                    <el-form-item label="理由" prop="reason">
                        <el-input v-model="form.reason" type="textarea" ></el-input>
                    </el-form-item>
                    <el-form-item label="其他信息，比如年终奖，福利，可选填" prop="others">
                        <el-input v-model="form.others"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="submit" :disabled="buttonLock">提交</el-button>
                        <el-button @click="goBack">取消</el-button>
                    </el-form-item>
                </el-form>

            </el-main>
            <el-footer></el-footer>
        </el-container>
</template>

<script>
    import companyApi from './api/companyApi'

    export default {
        name: 'add',
        data: function() {
            return {
                buttonLock: false,
                form: {
                    name: '',
                    reason: '',
                    others: ''
                },
                rule: {
                    name: [
                        { required: true, message: '不能为空', trigger: 'blur' },
                        { min: 3, max: 50, message: '长度在3到50个字符之间', trigger: 'blur' }
                    ],
                    reason: [
                        { required: true, message: '不能为空', trigger: 'blur' },
                        { min: 3, max: 500, message: '长度在3到500个字符之间', trigger: 'blur' }
                    ],
                    others: [
                        { max: 200, message: '最多可输入50个字符', trigger: 'blur' }
                    ]
                }
            }
        },
        methods: {
            goBack(){
                this.$router.push({path:"/list"})
            },
            submit(){
                this.$refs.form.validate((valid) => {
                    if (valid) {
                        // 验证通过，提交数据
                        this.buttonLock = true
                        const postData = this.form
                        companyApi.add(postData).then(() => {
                            this.buttonLock = false
                            this.$alert('保存成功', '提示', {
                                confirmButtonText: '确定',
                                callback: () => {
                                    this.goBack()
                                }
                            })
                        })
                    }
                })
            }
        }
    }
</script>

<style>

</style>
